<template>
    <div class="view-home ">
        <div class="home-content">
            <div class="header-common-border hasborder" v-for="(year, index) in academicYears" :key="index">
                <el-collapse v-model="activeNames">
                    <el-collapse-item :title="year" :name="index">
                        <el-button type="primary" size="mini" @click="getall(year)">课程排序</el-button>
                        <div class="class-box" style="max-height:320px ;">
                            <el-card class="component-home_card" v-for="(course, index) in studyCourse" :key="index"
                                v-show="course.courseList.academicYear == year">
                                <div class="header-info" @click="toClassDetail(course.courseId)">
                                    <p class="time">{{ course.courseList.academicYear }} {{ course.courseList.semester }}
                                    </p>
                                    <p class="name">{{ course.courseList.courseName }}</p>
                                    <p class="classname">{{ course.courseList.clazz }}</p>
                                    <p class="classno">加课码{{ course.courseList.courseCode }}</p>
                                </div>
                                <div class="user-info">
                                    <div @click="toMember" style="cursor:pointer ;" v-show="course.type == 0">
                                        负责人:<span style="text-align:left ;">{{ course.user.name }}</span>
                                    </div>
                                    <div @click="toMember" style="cursor:pointer ;"
                                        v-show="course.type == 1 || course.type == 2">
                                        成员:<span style="text-align:left ;">{{ course.courseList.stuNum }}</span>人
                                    </div>
                                    <span style="cursor: pointer;" @click="untop(course.courseId, course.id)"
                                        v-show="course.isTop == 0">取消置顶</span>
                                    <span style="cursor: pointer;" @click="ontop(course.courseId, course.id)"
                                        v-show="course.isTop == 1">置顶</span>
                                    <div>
                                        <el-dropdown trigger="click">
                                            <span style="cursor: pointer;"><i class="el-icon-more"></i></span>
                                            <el-dropdown-menu slot="dropdown">
                                                <div @click="dropClassDialog(course.id)"><el-dropdown-item
                                                        class="clearfix">退课<el-badge class="mark" /></el-dropdown-item>
                                                </div>
                                                <div @click="pigeonholeDialogVisible1(course.courseId, course.id)">
                                                    <el-dropdown-item class="clearfix">归档管理<el-badge
                                                            class="mark" /></el-dropdown-item>
                                                </div>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </div>
                                <!-- 归档对话框 -->
                                <el-dialog title="要归档此课程吗" :visible="pigeonholeDialogVisible"
                                    @close="pigeonholeDialogVisible = false">
                                    <div>
                                        <p>您可以在“课程-归档管理”中查看此课程</p>
                                    </div>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="pigeonholeDialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="pigeonhole()">归档自己</el-button>
                                    </div>
                                </el-dialog>


                                <!-- 退课对话框 -->
                                <el-dialog title="确认要退出课程" :visible="dropClassDialogVisible"
                                    @close="closeDropClassDialog">
                                    <div>
                                        <p>您的这个课程的任何信息或评论将被永久删除</p>
                                        <p style="color:#ff941f;">警告：此操作无法撤销</p>
                                        <el-form :model="dropCoursePasswordDialogFrom" status-icon
                                            :rules="dropCoursePasswordDialogFromRules"
                                            ref="dropCoursePasswordDialogFromRef">
                                            <el-form-item prop="password">
                                                <el-input v-model="dropCoursePasswordDialogFrom.password" autocomplete="off"
                                                    placeholder="请输入登录密码验证"></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="closeDropClassDialog()">取 消</el-button>
                                        <el-button type="primary" @click="dropClass()">确定</el-button>
                                    </div>
                                </el-dialog>
                                <!-- 拖拽对话框 -->
                                <el-dialog title="课堂排序" :visible="draggableDialogVisible"
                                    @close="draggableDialogClose">

                                    <div class="list-box">
                                        <template>
                                            <div>
                                                <!--使用draggable组件-->
                                                <draggable v-model="list" chosenClass="chosen" forceFallback="true"
                                                    group="people" animation="1000" @start="onStart" @end="onEnd">
                                                    <transition-group>
                                                        <!-- <div class="item" v-for="element in myArray" :key="element.id">
                                                            {{ element.name }}</div> -->
                                                        <div class="item" style="display: flex;" v-for="course in list"
                                                            :key="course.id">

                                                            <div class="left" @click="toClassDetail(course.courseId)">
                                                                <span class="tag-flag">
                                                                    <span>协</span>
                                                                </span>
                                                                <p>加课码{{ course.courseList.courseCode }}</p>
                                                            </div>
                                                            <div class="right">
                                                                <div style="font-size: 12px;">
                                                                    {{ course.courseList.clazz }}
                                                                </div>
                                                                <div style="font-size: 16px;">{{
                                                                    course.courseList.courseName }}
                                                                </div>
                                                                <div style="font-size: 12px;">成员{{
                                                                    course.courseList.stuNum }}人
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </transition-group>
                                                </draggable>
                                            </div>
                                        </template>
                                    </div>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="draggableDialogClose">取 消</el-button>
                                        <el-button type="primary" @click="updataList">确定</el-button>
                                    </div>
                                </el-dialog>
                            </el-card>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
</template>
<script>
import { Encrypt } from "@/tools/decrypt.js";
import draggable from 'vuedraggable';
export default {
    name: 'classFoldStudyPage',
    data() {
        return {
            drag: false,
            list: [],
            activeNames: ['1'],
            user: {
                userId: this.$store.state.user.user.user.id
            },
            studyCourse: [],
            studyCourse1: [],
            academicYears: [],
            pigeonholeDialogVisible: false,//归档对话框 
            pigeonholeAllDialogVisible: false,//归档全部
            dropClassDialogVisible: false,//退课对话框
            draggableDialogVisible: false,//拖拽对话框
            changeIsTop: {
                courseId: '',
                id: '',
                isTop: ''
            },
            delectClassDialogVisible: false,
            delectCoursePasswordDialogFrom: {
                password: ''
            },
            delectCoursePasswordDialogFromRules: {
                password: [
                    { required: true, message: '必填项', trigger: 'blur', }
                ]
            },
            // 退出课程

            dropCoursePasswordDialogFrom: {
                password: ''
            },
            dropCoursePasswordDialogFromRules: {
                password: [
                    { required: true, message: '必填项', trigger: 'blur', }
                ]
            },
            // 归档
            changeIspigeonhole: {
                courseId: '',
                id: '',
                isPigeonhole: ''
            },
            courseId: ''
        }
    },
    methods: {
        // 根据年份获取要展示的list
        getall(year) {
            this.draggableDialogVisible = true
            for (let i = 0; i < this.studyCourse.length; i++) {
                if (this.studyCourse[i].courseList.academicYear == year) {
                    this.list.push(this.studyCourse[i])
                }
            }
        },
        draggableDialogClose() {
            this.draggableDialogVisible = false;
            this.list = []
        },
        updataList() {
            this.studyCourse = this.list
            this.draggableDialogVisible = false
        },
        //开始拖拽事件
        onStart() {
            this.drag = true;
        },
        //拖拽结束事件
        onEnd() {
            this.drag = false;
        },
        //归档对话框展示
        pigeonholeDialogVisible1(courseId, id) {
            this.changeIspigeonhole.courseId = courseId
            this.changeIspigeonhole.id = id
            this.changeIspigeonhole.isPigeonhole = 0
            this.pigeonholeDialogVisible = true
        },
        pigeonhole() {
            this.$http.post("/userCourse/update", this.changeIspigeonhole).then(res => {
                if (res) {
                    this.$message.success("归档成功！")
                    this.pigeonholeDialogVisible = false
                    window.location.reload();
                } else {
                    this.$message.error("归档失败！")
                }
            })
        },
        // 退课
        dropClass() {
            this.dropCoursePasswordDialogFrom.password = Encrypt(this.dropCoursePasswordDialogFrom.password)
            if (this.dropCoursePasswordDialogFrom.password == this.$store.getters.user.password) {
                this.$http.get(`/userCourse/delete/${this.courseId}`).then(res => {
                    if (res) {
                        this.dropCoursePasswordDialogFrom.password = ''
                        this.dropClassDialogVisible = false
                        window.location.reload();
                    }
                })
            } else {
                this.$message.error("密码错误！")
            }
        },

        closeDropClassDialog() {
            this.dropCoursePasswordDialogFrom.password = ''
            this.dropClassDialogVisible = false
        },
        //退课对话框展示
        dropClassDialog(courseId) {
            this.courseId = courseId
            this.dropClassDialogVisible = true
        },
        // 删除课程
        delectCourse(id) {
            if (this.delectCoursePasswordDialogFrom.password == this.$store.getters.user.password) {
                this.$http.get(`/userCourse/delete/${id}`).then(res => {
                    if (res) {
                        this.delectCoursePasswordDialogFrom.password = ''
                        this.delectClassDialogVisible = false
                        window.location.reload();
                    }
                })
            } else {
                this.$message.error("密码错误！")
            }
        },

        getStudyCourse() {
            //获取我学的课程
            this.user.type = 0
            this.$http.post("/userCourse/list", this.user).then(res => {
                if (res) {
                    this.studyCourse1 = res.data.list
                    for (let i = 0; i < this.studyCourse1.length; i++) {
                        if (this.studyCourse1[i].isPigeonhole == 1) {
                            this.studyCourse.push(this.studyCourse1[i])
                        }
                    }
                    for (let i = 0; i < this.studyCourse.length; i++) {
                        //获取所有所学课程的时间3
                        if (this.academicYears.length == 0) {
                            this.academicYears.push(this.studyCourse[i].courseList.academicYear)
                        } else {
                            for (let n = 0; n < this.academicYears.length; n++) {
                                if (!this.academicYears.includes(this.studyCourse[i].courseList.academicYear)) {
                                    this.academicYears.push(this.studyCourse[i].courseList.academicYear)
                                }
                            }
                        }

                    }
                }
            }
            )
        },
        //跳转到课程内容页面
        toClassDetail(courseId) {
            this.$store.dispatch("saveCourseIdInfo", { courseId: courseId })
            this.$router.push("/main/classDetail")
        },
        //跳转到成员页面
        toMember() {
            this.$router.push("/main/member")
        },
        // 点击 取消置顶字段，让课程不置顶，同时字段改变为 置顶
        untop(courseId, id) {
            this.changeIsTop.courseId = courseId
            this.changeIsTop.id = id
            this.changeIsTop.isTop = 1
            this.$http.post("/userCourse/update", this.changeIsTop).then(res => {
                if (res) {
                    window.location.reload();
                    window.location.reload();
                }
            })

        },
        //点击 置顶字段，让课程置顶，同时字段改变为 取消置顶
        ontop(courseId, id) {
            this.changeIsTop.courseId = courseId
            this.changeIsTop.id = id
            this.changeIsTop.isTop = 0
            this.$http.post("/userCourse/update", this.changeIsTop).then(res => {
                if (res) {
                    window.location.reload();
                    window.location.reload();
                }
            })

        },
        // 编辑
        edit(courseId) {
            this.$store.dispatch("saveCourseIdInfo", { courseId: courseId })
            this.$router.push('/classSetting')
        },

    },
    mounted() {
        this.getStudyCourse();

    },
    components: {
        draggable
    }

}
</script>
<style scoped>
.view-home {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 24px;
}

.view-home .home-content {
    flex: 1;
}

.view-home .hasborder {
    border: 1px solid #dadce0;
    padding: 18px;
}

.view-home .hasborder2 {
    /* border: 1px solid #dadce0; */
    padding: 18px;
}

.view-home .header-common-border {
    border-radius: 8px;
    padding-top: 18px;
    padding-bottom: 8px;
}

.view-home .top-handler {
    display: flex;
    justify-content: space-between;
}

.view-home .top-handler .left {
    font-size: 20px;
    font-family: PingFangSC, PingFangSC-Medium;
    color: #575a5b;
    font-weight: 500;
}

.view-home .top-handler .right {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #4285f4;
}

.view-home .home-content .class-box {
    margin: 8px -10px 0;
    display: flex;
    flex-flow: row wrap;
    overflow-y: auto;
}

.view-home .home-content .class-box>div {
    margin: 11px;
}

.component-home_card {
    width: 255px;
    height: 234px;
    background: #fff;
    border: 1px solid #e2e6ed;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.component-home_card .header-info {
    cursor: pointer;
    padding: 5px 24px;
    height: 152px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #3367d5;
    background-image: url(../../../../assets/backgroundImage/backgroundImage.jpg);
}


.user-info {
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #3c4043;
}

.view-home .home-content .class-box {
    margin: 8px -10px 0;
    display: flex;
    flex-flow: row wrap;
    overflow-y: auto;
}

.view-home .home-content .class-box>div {
    margin: 11px;

}

.component-home_card {
    width: 255px;
    height: 234px;
    background: #fff;
    border: 1px solid #e2e6ed;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}


.time {
    font-size: 8px;
    color: rgb(184, 184, 184);
}

.name {
    font-size: 20px;
    margin: 8px 0 8px 0;
}

.classname {
    font-size: 10px;
    margin: 8px 0 8px 0;
}

.classno {
    font-size: 14px;
    margin: 8px 0 8px 0;
}

.user-info {
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #3c4043;
}

.el-dropdown-item {
    margin: 0;
    padding: 0 0 0 0;
    height: 36px;
}

.list-box {
    padding-left: 24px;
    padding-top: 24px;
    flex: 1 1 70%;
    overflow: auto;
    height: 400px;

}

.list-box.item {
    margin-bottom: 16px;
    width: 100%;
    height: 112px;
    padding: 16px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dadce0;
    border-radius: 4px;
}

.left {
    background: no-repeat 50%/cover;
    margin-right: 16px;
    position: relative;
    width: 96px;
    height: 80px;
    background: #faa723;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    background-image: url(../../../../assets/backgroundImage/backgroundImage.jpg);
}

.left p {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 96px;
    height: 24px;
    background: rgba(0, 0, 0, .4);
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    color: #fff;
    line-height: 24px;
}

.right {
    flex: 1;
    /* background-color: #3367d5; */
}

.tag-flag {
    position: absolute;
    top: 0;
    left: 8px;
}

.el-dropdown {
    float: right;

}

.item {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    margin-bottom: 10px;
    cursor: move;
}

/*选中样式*/
.chosen {
    border: solid 1px #3089dc !important;
}
</style>